<template>
    <div>
        <van-nav-bar title="MV广场" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-grid :gutter="10" :column-num="2" :border="false" :center="false">
            <van-grid-item v-for="item, index in allmvList" :key="index" @click="toStartMV(item.id)">
                <van-image :src="item.cover">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
                <span>{{ item.name }}</span>
            </van-grid-item>
            <!-- <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" />
            <van-grid-item icon="photo-o" text="文字" /> -->
        </van-grid>

    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Toast } from 'vant';
import { RequestAllMV, RequestMVUrl } from "@/api/homeFind";
const onClickLeft = () => history.back();


// 渲染MV数据
let allmvList = ref([])
const toGetAllMV = async (area = '全部', limit = 30) => {
    let allmvData = await RequestAllMV(area, limit)
    const { code, data } = allmvData.data
    allmvList.value = data
    console.log(allmvList)
}
toGetAllMV('全部', 30)
// MV跳转播放
const toStartMV = async (id: number) => {
    console.log(id)
    let MVUrlData = await RequestMVUrl(id)
    console.log(MVUrlData)
    const { code, data } = MVUrlData.data
    if (code == 200) {
        console.log(data.url)
        if (data.url != null) {
            location.href = data.url
        } else {
            Toast.fail('链接已失效');
        }
    }
}

</script>
<style scoped lang="scss">
.van-grid {
    font-size: 10px;

    span {
        margin-top: 5px;
    }
}
</style>